<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <!--
        过滤器：
            定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)
            语法：
                1.注册过滤器：Vue.filter(name, callback) 或 new Vue{ filters: {}}
                2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
            备注：
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据，是产生新的对应的数据
    -->

    <div id="root">
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是{{time | timeFormatter}}</h3>
      <!-- 过滤器实现（传参） -->
      <h3>现在是{{time | timeFormatter('YYYY_MM_DD') | mySlice}}</h3>
      <h3 :x="msg | mySlice2">hello world</h3>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    // 全局过滤器
    Vue.filter("mySlice2", function (v) {
      return v.slice(0, 4);
    });

    new Vue({
      el: "#root",
      data: {
        time: 1680343319961,
        msg: "hello world",
      },
      methods: {
        getFmtTime() {
          return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
        },
      },
      computed: {
        fmtTime() {
          // return dayjs().format("YYYY-MM-DD HH:mm:ss");
          return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
        },
      },
      // 局部过滤器
      filters: {
        timeFormatter(v, str = "YYYY年MM月DD日 HH:mm:ss") {
          // console.log(v);
          return dayjs(v).format(str);
        },
        mySlice(v) {
          return v.slice(0, 4);
        },
      },
    });
  </script>
</html>
